<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div class="topNav">
        <div class="floatRight">
            <div class="topTitle">登录</div>
            <div class="topTitle">注册 </div>
            <div class="topTitle">我的订单</div>
            <div class="topTitle">帮助中心</div>
            <div class="topTitle">在线客服</div>
            <div class="topTitle">手机版</div>
        </div>
    </div>
    <div class="middleNav">
        <img src="D:\img\3.webp" class="floatLeft">
        <div class="middle">
            <div>首页</div>
            <div>图书库 </div>
            <div>教学资料库</div>
            <div>关于我们</div>
        </div>
         <div class="floatRight search ">
            <div>
                <input placeholder="请输入关键字">
                <button>搜索</button>
            </div>
        </div>
    </div>
        <div class="middleSite">
            <div class="leftNav floatLeft">
                <div class="leftTitle">前端开发</div>
                <div class="leftTitle">后端开发</div>
                <div class="leftTitle">计算机</div>
                <div class="leftTitle">兴趣技能</div>
                <div class="leftTitle">考研</div>
                <div class="leftTitle">艺术</div>
                <div class="leftTitle">更多方向</div>
            </div>

            <div class="banner floatRight" >
                <img src="D:\img\3.webp" >
                <img src="D:\img\4.webp">
                <img src="D:\img\5.webp">
                <button style="left:5px;" id="leftBtn">&lt;</button>
                <button style="right: 5px;" id="rightBtn">&gt;</button>
            </div>
        </div>
</body>
<script>
    var index=1;//代表那张图片显示
    var max=3;//现在有三张图片
    var firstImgDom = document.querySelector('.banner img');
    firstImgDom.style.display="block";//让第一张图片显示出来
    var buttonDomLeft=document.querySelector("#leftBtn");
    var buttonDomRight=document.querySelector("#rightBtn");
    buttonDomLeft.onclick=function(){
        //获取第上一个元素的dom
        var nextIndex=((index-2+max)%max)+1;//上一个图片的序号
        var nextImgDom=document.querySelector(".banner img:nth-child("+nextIndex+")"
        );//第nextIndex的dom元素，即将显示的图片的dom
        console.log(nextImgDom);
        nextImgDom.style.display='block';
        var nowImgDom=document.querySelector(".banner img:nth-child("+index+")"
        );
        nowImgDom.style.display='none';
        index=nextIndex;
    };
</script>
<style>
    @import url('topNav.css');
    @import url('common.css');
    @import url('middleNav.css');
    @import url(middleSite.css);
    * {
        box-sizing: boder-box;
    }
</style>

</html>